import { createFileRoute } from "@tanstack/solid-router";
import { For } from "solid-js"
<% if (!tailwind) { %>
import logo from "../logo.svg";
import "../App.css";
<% } else { %> import {
Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles, } from "lucide-solid";
<% } %>

export const Route = createFileRoute("/")({ component: App, });

function App() { <% if (tailwind) { %>
  const features = [
    {
      icon: <Zap class="w-12 h-12 text-cyan-400" />,
      title: "Powerful Server Functions",
      description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
    },
    {
      icon: <Server class="w-12 h-12 text-cyan-400" />,
      title: "Flexible Server Side Rendering",
      description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
    },
    {
      icon: <RouteIcon class="w-12 h-12 text-cyan-400" />,
      title: "API Routes",
      description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
    },
    {
      icon: <Shield class="w-12 h-12 text-cyan-400" />,
      title: "Strongly Typed Everything",
      description: "End-to-end type safety from server to client. Catch errors before they reach production.",
    },
    {
      icon: <Waves class="w-12 h-12 text-cyan-400" />,
      title: "Full Streaming Support",
      description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
    },
    {
      icon: <Sparkles class="w-12 h-12 text-cyan-400" />,
      title: "Next Generation Ready",
      description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
    },
  ];

return (
<div
  class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"
>
  <section class="relative py-20 px-6 text-center overflow-hidden">
    <div
      class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"
    ></div>
    <div class="relative max-w-5xl mx-auto">
      <div class="flex items-center justify-center gap-6 mb-6">
        <img
          src="/tanstack-circle-logo.png"
          alt="TanStack Logo"
          class="w-24 h-24 md:w-32 md:h-32"
        />
        <h1
          class="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]"
        >
          <span class="text-gray-300">TANSTACK</span>{" "}
          <span
            class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent"
          >
            START
          </span>
        </h1>
      </div>
      <p class="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
        The framework for next generation AI applications
      </p>
      <p class="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
        Full-stack framework powered by TanStack Router for React and Solid.
        Build modern applications with server functions, streaming, and type
        safety.
      </p>
      <div class="flex flex-col items-center gap-4">
        <a
          href="https://tanstack.com/start"
          target="_blank"
          rel="noopener noreferrer"
          class="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
        >
          Documentation
        </a>
        <p class="text-gray-400 text-sm mt-2">
          Begin your TanStack Start journey by editing{" "}
          <code class="px-2 py-1 bg-slate-700 rounded text-cyan-400">
            /src/routes/index.tsx
          </code>
        </p>
      </div>
    </div>
  </section>

  <section class="py-16 px-6 max-w-7xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <For each={features}>
        {(feature) => (
        <div
        class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10"
      >
        <div class="mb-4">{feature.icon}</div>
        <h3 class="text-xl font-semibold text-white mb-3">{feature.title}</h3>
        <p class="text-gray-400 leading-relaxed">{feature.description}</p>
      </div>
      )}
      </For>
    </div>
  </section>
</div>
); <% } else { %> return (
<div class="App">
  <header class="App-header">
    <img src="{logo}" class="App-logo" alt="logo" />
    <p>Edit <code>src/routes/index.tsx</code> and save to reload.</p>
    <a
      class="App-link"
      href="https://www.solidjs.com/"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn Solid
    </a>
    <a
      class="App-link"
      href="https://tanstack.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn TanStack
    </a>
  </header>
</div>
); <% } %> }
